LAPORAN TUGAS MATA KULIAH
METODOLOGI DESAIN PERANGKAT LUNAK PRAKTIK
Dosen : Irma Handayani, S.Kom., M.Cs.
Studi Kasus
PERANCANGAN APLIKASI MENGGAMBAR ONLINE BERBASIS WEB
MENGGUNAKAN METODE RAPID APPLICATION DEVELOPMENT
Oleh :
5200411122 Gressensia Olivia Neno Aumenu
5200411144 Bella Primin
5200411202 Berliana 'Isyatin Rodhiyah
5200411226 Ade Lia Saputri
5200411236 Lili Christi
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS TEKNOLOGI YOGYAKARTA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Menggambar adalah salah satu cara untuk mengekspresikan perasaan melalui goresan pena.
Untuk mengekspresikan diri, biasanya anak kecil akan suka mencoret-coret kertas.
Dikarenakan kebiasaan mencoret itu, banyak kertas yang terbuang dan tidak bisa dipakai lagi.
Apalagi penggunaan kertas dalam kehidupan semakin bertambah. Banyaknya konsumsi kertas
tentu saja dapat mempengaruhi tingkat penebangan pohon.
Selain kertas, banyak pula benda benda yang rusak, juga banyak dinding yang kotor akibat
coretan para anak kecil. Kerusakan yang ditimbulkan akan membutuhkan lebih banyak budget
untuk memperbaikinya. Selanjutnya, penggunaan pensil, pensil warna, krayon, ataupun cat,
belum terlalu perlu hanya untuk bermain anak-anak, karna akan menambah budget yang
dibutukan untuk itu.
Berawal dari adanya keluhan para orangtua kepada Perusahaan BimBel Bumi dengan sistem
menggambar yang manual karena banyak media serta bahan yang harus dikumpulkan, untuk
itu kami melakukan sebuah pembuatan rancangan aplikasi menggambar berbasis web untuk
Bimbingan Belajar Bumi. Dengan mendaftarkan anaknya menggunakan aplikasi ini, para guru
juga dapat memantau perkembangan seni para murid.
Dalam aplikasi menggambar online ini dapat membantu meminimalisir penggunaan kertas
sebagai media serta dapat mengurangi budget yang akan dikeluarkan untuk anak-anak
menggambar. Selain itu, aplikasi ini akan membantu anak-anak untuk belajar menggambar.
Hal ini sangat mempermudah proses menggambar dalam media dan bidang yang ada.
Sistem ini akan mengolah data user, data admin dan data gambar dengan menggunakan
MySQL. Sistem ini dibangun dengan menggunakan bahasa pemrograman PHP, HTML,
JavaScript, dan CSS. Hasil dari penelitian ini sistem dapat membantu proses penggambaran
dengan adanya system yang efisien dan lebih fleksibel.
1.2 Rumusan Masalah
Mengenai rumusan masalah yang akan dibahas, berdasarkan konteks masalah yang diuraikan
di atas, khususnya yaitu:
a. Bagaimana cara membuat aplikasi menggambar berbasis web.
b. Bagaimana merancang dan membangun aplikasi menggambar yang mudah digunakan untuk
anak-anak.
1.3 Batasan Masalah
Berdasarkan dari identifikasi masalah tersebut, kami membatasi masalah hanya pada:
a. Pengguna aplikasi adalah para guru dan murid di Bimbingan Belajar Bumi.
b. Pendaftaran user dilakukan oleh admin, yang selaku guru dari user.
c. Alat menggambar yang digunakan hanya berupa garis dan warna.
d. Tampilan menggambar berupa kanvas, volume garis, dan pilihan warna.
e. Gambar dapat disimpan, diubah, dan dihapus.
1.4 Tujuan Penelitian
Tujuan dilakukanya penelitian ini yaitu:
a) Menghasilkan sebuah aplikasi menggambar untuk anak-anak.
b) Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.
1.5 Manfaat Penelitian
Berikut adalah manfaat dari dilakukanya penelitian ini adalah :
a) Mempermudah anak-anak untuk dapat menggambar dan mewarnai.
b) Mengurangi penggunaan kertas
c) Mengurangi penggunaan budget untuk menggambar.
BAB II
LANDASAN TEORI
2.1 Definisi Menggambar
Secara umum pengertian menggambar adalah kegiatan menorehkan pensil ataupun
pewarna di atas media kertas. Sedangkan pengertian secara khusus, menggambar adalah
kegiatan-kegiatan membentuk imaji, dengan menggunakan banyak pilihan teknik dan alat
dengan membuat tanda-tanda tertentu di atas permukaan media dengan mengolah goresan dari
alat gambar. Gambar merupakan karya seni rupa dua dimensi yang berfungsi untuk untuk
menerangkan ataupun menjelaskan sesuatu.
2.2 Sistem Menggambar
Menggambar adalah kegiatan membentuk citra dengan menggunakan banyak pilihan
teknik dan alat. Dengan membuat tanda-tanda tertentu di atas permukaan dan mengolah
goresan dari alat gambar. Kebanyakan karya menggambar adalah representasi dari ingatan atau
imajinasi seorang juru gambar.
2.3 HTML
HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman
website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau
"bahasa markup". HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam
sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan bisa dipahami
oleh para pengguna internet.
Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai metode
yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan atau simbol
yang muncul di halaman website.
Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks
didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut akan
muncul dengan huruf tebal atau bold di laman website.
2.4 CSS
CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk
menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa
markup.CSS dipakai untuk mendesain halaman depan atau tampilan website. CSS menangani
tampilan dan ‘rasa’ dari halaman website.
Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan
bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat
mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang
dipakai.Tidak hanya itu CSS juga bisa untuk mendesain layout, variasi tampilan di berbagai
perangkat yang berbeda, dan berbagai efek yang dipakai di dalam website.
CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian
tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat
ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun
PHP.
2.5 JAVASCRIPT
JavaScript adalah bahasa pemograman populer yang digunakan untuk membuat situs
dengan konten website yang dinamis. Konten dinamis artinya konten dapat bergerak atau
berubah di depan layar tanpa perlu mereload halaman. Misalnya saja, fitur slideshow foto,
gambar animasi, pengisian poling, dan lainnya.
JavaScript sendiri sebenarnya biasanya dikolaborasikan dengan HTML dan CSS. Di
mana HTML digunakan untuk membuat struktur website dan CSS untuk merancang style
halaman website. Lalu, JavaScript berperan menambahkan elemen interaktif untuk
meningkatkan engagement pengguna.
2.6 Data Flow Diagram
DFD adalah suatu diagram yang menggambarkan aliran data dari sebuah proses yang
sering disebut dengan sistem informasi. Di dalam data flow diagram juga menyediakan
informasi mengenai input dan output dari tiap entitas dan proses itu sendiri.
Dalam diagram alir data juga tidak mempunyai kontrol terhadap flow -nya, sehingga
tidak adanya aturan terkait keputusan atau pengulangan. Bentuk penggambaran berupa
data flowchart dengan skema yang lebih spesifik. Menurut Kenneth Kozar, tujuan dari adanya
DFD sendiri adalah sebagai penyedia atau menjembatani antara pengguna dengan sistem.
Data flow diagram berbeda dengan UML (Unified Modelling Language), dimana hal
mendasar yang menjadi pembeda antara kedua skema tersebut terletak
pada flow dan objective penyampaian informasi di dalamnya.
2.7 Eternity Relationship Diagram (ERD)
ERD adalah pemodelan data atau sistem dalam database yang sudah sering digunakan
oleh banyak lembaga. Fungsinya ERD adalah untuk memodelkan struktur dan hubungan antar
data yang relatif kompleks. Keberadaan sistem ERD sangat penting untuk perusahaan dalam
mengelola data yang dimilikinya.Bentuknya seperti diagram yang menjelaskan hubungan antar
objek data.
Bentuknya seperti diagram yang menjelaskan hubungan antar objek data. Untuk
menggambarkannya dibutuhkan:
Notasi ialah seperangkat lambang yang menggambarkan data
Simbol sebagai lambang sebagai penanda
Bagan merupakan rancangan atau skema untuk mempermudah penafsiran dan lain
sebagainya.
2.8 Metode Rapid Application Development
Metode pengembangan perangkat lunak RAD (Rapid Application Development) adalah
sebuah proses pengembangan perangkat lunak yang menekankan siklus pengembangan dengan
waktu yang singkat. Definisi lain menyatakan bahwa metode pengembangan perangkat lunak
RAD adalah metode yang menggunakan pendekatan beorientasi objek untuk pengembangan
sistem yang meliputi pengembangan perangkat dan perangkat lunak.
Rapid application development adalah metode yang berfokus pada pengembangan
aplikasi secara cepat, melalui pengulangan dan feedback berulang-ulang. RAD diajukan oleh
IBM pada tahun 1980 sampai 1990-an, ketika permintaan terhadap aplikasi semakin
meningkat.
Proses atau Tahapan yang berada di dalam metode RAD dibagi menjadi 4 tahapan yaitu
Perencanaan Kebutuhan, Mendesain Sistem, Proses pengembangan & pengumpulan feedback
dan Implementasi atau penyelesaian produk. Proses-proses tersebut dapat dilihat pada gambar
berikut.
a. Perencanaan Kebutuhan.
Tahapan ini merupakan tahap awal dalam suatu pengembangan sistem, dimana
pada tahap ini dilakukan identifikasi masalah dan pengumpulan data yang diperoleh
dari pengguna atau stakeholder pengguna yang bertujuan untuk mengidentifikasi
maksud akhir atau tujuan dari sistem dan kebutuhan informasi yang diinginkan. Pada
tahap ini keterlibatan kedua belah sangatlah penting dalam mengidentifikasi kebutuhan
untuk pengembangan suatu sistem.
b. Desain Sistem.
Di dalam tahap desain sistem, keaktifan pengguna yang terlibat sangatlah penting
untuk mencapai tujuan karena pada tahapan ini dilakukan proses desain dan proses
perbaikan desain secara berulang-ulang apabila masih terdapat ketidaksesuaian desain
terhadap kebutuhan pengguna yang telah diidentifikasi pada tahapan sebelumnya.
Luaran dari tahapan ini adalah spesifikasi software yang meliputi organisasi di dalam
sistem secara umum, struktur data, dan lain-lain.
c. Proses pengembangan dan pengumpulan feedback.
Pada tahap ini desain sistem yang telah dibuat dan disepakati, diubah ke dalam
bentuk aplikasi versi beta sampai dengan versi final. Pada tahapan ini juga programmer
harus terus-menerus melakukan kegiatan pengembangan dan integerasi dengan bagian-
bagian lainnya sambal terus mempertimbangkan feedback dari pengguna atau klien.
Jika proses berjalan lancar maka dapat berlanjut ke tahapan berikutnya, sedangkan jika
aplikasi yang dikembangkan belum menjawab kebutuhan, programmer akan kembali
ke tahapan desain sistem.
d. Implementasi atau penyelesaian produk.
Tahapan ini merupakan tahapan dimana programmer menerapkan desain dari
suatu sistem yang telah disetujui pada tahapan sebelumnya. Sebelum sistem diterapkan,
terlebih dahulu dilakukan proses pengujian terhadap program untuk mendeteksi
kesalahan yang ada pada sistem yang dikembangkan. Pada tahap ini biasa memberikan
tanggapan akan sistem yang sudah dibuat dan mendapat persetujuan mengenai sistem
tersebut.
BAB III
ANALISIS DAN PERENCANAAN SISTEM
3.1 ANALISIS SISTEM
Penelitian ini diharapkan dapat menghasilkan sebuah aplikasi menggambar yang dapat
digunakan untuk semua kalangan, terutama anak-anak, dengan mudah dan efektif.
Kebutuhan sistem ialah sebagai berikut :
a. Aplikasi ini berbasis web yang akan digunakan pada browser.
b. Aplikasi akan terkoneksi ke server database melalui koneksi internet dari perangkat user.
3.2 METODE PENELITIAN
Teknik pengumpulan data yang digunakan dalam penelitian ini, sebagai berikut:
a. Observasi
Observasi merupakan teknik mendapatkan data primer dengan cara mengamati
langsung onyek datanya (Jogiyanto, 2008). Pada penelitian ini, observasi dilakukan
secara online untuk mengamati proses user menggambar dan hasil penggambaran user.
b. Wawancara
Wawancara adalah komunikasi dua arah untuk mendapatkan data daru responden
(Jogiyanto, 2008). Wawancara dilakukan untuk mengkonfirmasi data atau fakta yang
diperoleh pada saat observasi serta sekaligus untuk menggali software requirement dari
user. Wawancara dilakukan kepada user yang terlibat dalam proses menggambar
online.
c. Studi Pustaka
Studi pustaka dilakukan untuk mengumpulkan data dan informasi melalui
dokumen-dokumen baik dalam bentuk buku, jurnal, prosiding, laporan-laporan, atau
bentuk-bentuk lain dalam bentuk tercetak maupun digital. Studi pustaka akan semakin
kredibel apabila didukung oleh foto-foto atau karya tulis akademik dan seni yang telah
ada.
3.3 METODE PENGEMBANGAN SISTEM
Dalam penelitian ini menganalisa dan memaparkan bagaimana konsep penerapan metode
RAD dalam pengembangan aplikasi menggambar berbasis web. Kami merancang aplikasi
dengan melakukan beberapa penelitian dengan menerapakan metode RAD dalam
mengembangkan sistem aplikasi menggambar berbasis web yang kami buat.
a. Perencanaan Kebutuhan
Dalam tahap ini kami mengidentifikasi tujuan-tujuan aplikasi atau sistem
serta mengidentifikasi kebutuhan informasi apa saja yang dibutuhkan dan juga
masalah-masalah apa saja yang ditimbulkan dari tujuan-tujuan tersebut.
Perencanaan yang akan dibuat kedalam sistem, yaitu :
Mengidentifikasi tujuan perancangan sistem aplikasi menggambar berbasis
web.
Mengidentifikasi kebutuhan perancangan aplikasi menggambar berbasis
web.
Mengidentifikasi definisi masalah, mengumpulkan informasi sebanyak-
banyaknya dari berbagai pihak.
b. Desain Sistem
Tahap ini adalah untuk merancang sebuah sistem pemasaran yang
memanfaatkan website untuk mengembangkan usaha dan memperbaiki hal-hal apa
saja yang dapat dilakukan dalam pelaksanaan tahapan desain sistem. Adapun
metode desain yang digunakan terdiri dari beberapa tahapan yaitu :
Diagram Jenjang, menggambarkan bagaimana sistem aplikasi menggambar
berbasis web. Dengan adanya diagram ini, alur proses dari sistem akan lebih
teratur dan jelas.
Diagram Konteks. Pada tahap ini dijelaskan penggambaran asal data dan
menunjukkan aliran dari data tersebut.
Data Flow Diagram. Pada diagram ini, digambarkan seluruh kegiatan yang
terdapat pada sistem secara jelas.
Entity Relation Diagram. Pada diagram ini dijelaskan rancangan database
yang menggambarkan relasi antar entitas dan atributnya.
c. Implementasi atau Penyelesaian Produk
Setelah melakukan analisis sistem dan perancangan sistem secara rinci, maka
tiba saatnya sistem untuk diimplementasikan. Pada tahap ini, terdapat banyak
aktivitas yang dilakukan, antara lain :
Membangun Sistem
Dalam tahap ini sistem aplikasi dirancang dengan menggunakan bahasa
pemrograman PHP dan database MySql.
Menguji Sistem
Pada tahap ini dilakukan proses pengujian atau testing terhadap sistem pada
aplikasi menggambar berbasis web dan melakukan pengenalan terhadap
sistem. Dalam hal ini, sistem di uji agar dapat dijalankan dalam bentuk
aplikasi.
Tindak lanjut implementasi
Dalam tahapan ini, perlu dilakukan pengetesan penerimaan sistem dengan
menggunakan data yang sesungguhnya. Tahapan ini akan berpengaruh pada
sistem aplikasi menggambar berbasis web yang merupakan sebuah sistem
baru, agar dapat dengan mudah diterima atau perlu adanya perbaikan
kembali.
3.4 PERANCANGAN SISTEM
Perancangan system aplikasi menggambar berbasis web ini menggunakan DFD (Data
Flow Diagram) yang merupakan salah satu teknik pemodelan desain sistem berbasis web.
Pemodelan ini menjadi bagian penting dalam pengembangan sistem karena menjadi satu
satunya cara untuk memvisualisasikan desain sistem dan memeriksa apakah sudah memenuhi
standar yang diinginkan sebelum memulai coding. Beberapa jenis Diagram yang dibuat antara
lain yaitu Diagram koneks, DFD dan ERD.
a. Diagram Jenjang
Diagram Jenjang merupakan desain dan teknik dokumentasi dalam siklus
pengembangan system. Dengan tujuan dapat memberikan informasi berupa diagram tang
terstruktur menampilkan semua proses dalam system.
b. Diagram Level 0 (Diagram Konteks)
Diagram konteks atau level 0 merupakan diagram dengan tingkatan paling rendah, dimana
menggambarkan sistem berinteraksi dengan entitas eksternal. Pada diagram konteks akan
diberi nomor untuk setiap proses yang berjalan, dimulai dari angka 0 terlebih dahulu.
c. Diagram Level 1
DFD level 1 merupakan lanjutan dari diagram konteks, dimana setiap proses yang berjalan
akan diperinci pada tingkatan ini. Sehingga, proses utama akan dipecah menjadi sub sub
proses yang lebih kecil lagi.
d. Diagram level 2
DFD level 2 merupakan tingkat lanjutan dari level yang sebelumnya, dimana pada fase ini
akan dijelaskan lebih detail terkait tiap prosesnya.
DFD Level 2 Master Data
DFD Level 2 Proses Menggambar
e. ERD
ERD (Entity Relationship Diagram) atau diagram hubungan entitas adalah diagram yang
digunakan untuk perancangan suatu database dan menunjukan relasi antar objek atau entitas
beserta atribut-atributnya secara detail.
3.5 PERANCANGAN DATABASE
3.5.1 Database Aplikasi
3.5.2 Database Data User
3.6 DESAIN INTERFACE
3.7.1 Landing Page
3.7.2 Halaman Login
3.7.3 Halaman Daftar
3.7.4 Home3.7.5 Halaman Menggambar
3.7.6 Daftar Gambar User
3.7.7 Hapus Daftar Gambar User
3.7.8 Daftar Nama User pada Admin
3.7.9 Daftar Gambar User pada Admin
3.7.10 Daftar Gambar User yang sudah dihapus oleh Admin
BAB IV
IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi
4.1.1 Landing Page dan Source Code
Landing page pada halaman browser akan menampilkan halaman pertama atau disebut juga
Home. Terdapat tombol Login untuk masuk ke halaman Login.
<html>
<head>
<title>aplikasi Drawpen</title>
<style>
h1{
color: aliceblue;
text-align: center;
font-size: 160px;
text-indent: 200px;
}
h2{
color: aliceblue;
text-align: center;
font-size: 30px;
text-indent: 400px;
}
.login1{
color: rgb(255, 255, 255);
text-align:end;
margin-left:1200px;
font-size: 50px;
}
body{
background-image:url("gambar.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body >
<br>
<a class="login1" href="login.php">LOGIN</a>
<br>
<br>
<h1>Drawing</h1>
<h2>Easy Online to Draw and Painting</h2>
</body>
</html>
4.1.2 Halaman Login dan Source Code
Sebelum masuk ke halaman mengambar, pengguna diminta untuk melakukan login
dengan mengisikan email or username dan password. Jika ingin mendaftar lebih dulu,
admin dapat menekan tombol Daftar.
<body >
<h1>Drawing</h1>
<br>
<br>
<td>
<table class="tabel" align="center" style="border-radius: 15px; background-color:
rgb(75, 159, 233);" cellspacing="15">
<tr class="trt1" height="50px" bgcolor="#E0FFFF">
<td colspan="2" align="center" style="color: #2412b0"> <h3>LOGIN</h3></td>
</tr>
<tr>
<td>e-mail or username:</td>
<td>:
<input name="e-mail" id="NPM" type="text" placeholder="masukkan e-mail"
maxlength="10" required>
</td>
</tr>
<tr>
<td>Password</td>
<td>:
<input name="Password" id="Password" type="password"
placeholder="masukkan Password ">
</td>
</tr>
<tr>
<td><a href="home_admin.php">LOGIN ADMIN</a></td>
<td><a href="home.html">LOGIN</a></td>
<td><a href="daftar.html">DAFTAR</a></td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr height="90px">
<td>
<br>
<br>
<br>
<h6>Easy Online to Draw and Painting</h6>
</body>
</head>
</html>
4.1.3 Halaman Daftar dan Source Code
Sebelum user dapat menggunakan aplikasi, admin harus melakukan pendaftaran untuk
calon user dengan mengisikan e-mail, username, dan password seperti pada gambar di
bawah ini:
<body >
<h1>Drawing</h1>
<br>
<br>
<td>
<form action="back_daftar.php" enctype="multipart/form-data" method="post" id="form">
<table class="tabel" align="center" style="border-radius: 15px; background-color:
rgb(75, 159, 233);" cellspacing="15">
<tr class="trt1" height="50px" bgcolor="#E0FFFF">
<td colspan="2" align="center" style="color: #2412b0"> <h3>DAFTAR</h3></td>
</tr>
<tr>
<td>e-mail</td>
<td>:
<input name="email" id="email" type="text" placeholder="masukkan e-
mail">
</td>
</tr>
<tr>
<td>username:</td>
<td>:
<input name="username" id="username" type="text" placeholder="masukkan
username">
</td>
</tr>
<tr>
<td>Password</td>
<td>:
<input name="password" id="password" type="password"
placeholder="masukkan Password ">
</td>
</tr>
<tr>
<td><input type="submit" value="SIMPAN" id="save"></input></td>
</tr>
</table></form>
</td>
<td>
</td>
</tr>
<tr height="90px">
<td>
<br>
<br>
<br>
<h6>Easy Online to Draw and Painting</h6>
</body>
</head>
</html>
4.1.4 Halaman Utama Admin dan Sorce Code
Tampilan Home terdiri dari:
1. Buat gambar
2. Daftar gambar user
3. Daftar user
Berikut adalah tampilan halaman utama admin pada aplikasi menggambar:
<body>
<table border="0">
<tr>
<td><h1>Drawpen</h1></td>
</tr>
<tr>
<td><a href="drawing/index.html" type="button" class="a1 btn btn-lg
button12">BUAT GAMBAR</a></td>
</tr>
<tr>
<td><a href="daftar_gambar_user_admin.php" type="button" class="btn btn-lg
button12">DAFTAR GAMBAR USER</a></td>
</tr>
<tr>
<td><a href="daftar_user_admin.php" type="button" class="btn btn-lg
button12">DAFTAR USER</a></td>
</tr>
<tr>
<td><h6>Easy Online to Draw and Painting</h6></td>
</tr>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4.1.5 Halaman Utama User
Tampilan Home terdiri dari:
4. Buat gambar
5. Daftar gambar
Berikut adalah tampilan halaman utama admin pada aplikasi menggambar:
<body>
<table border="0">
<tr>
<td><h1>Drawpen</h1></td>
</tr>
<tr>
<td><a href="drawing/index.html" type="button" class="a1 btn btn-lg
button12">BUAT GAMBAR</a></td>
</tr>
<tr>
<td><a href="daftar_gambar_user.php" type="button" class="btn btn-lg
button12">DAFTAR GAMBAR</a></td>
</tr>
<tr>
<td><h6>Easy Online to Draw and Painting</h6></td>
</tr>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4.1.6 Halaman Menggambar dan Source Code
Pada halaman ini user sudah dapat menggambar dengan mengekspresikan semua idenya
dengan bebas.
Fitur yang ada pada halaman ini yaitu:
a. Memberi nama gambar
b. Mengganti warna pena
c. Mengubah size pena
d. Menghapus coretan
e. Ulangi gambar
f. Simpan gambar
<body>
<!--title-->
<div id="header">Aplikasi Menggambar</div>
<!--input-->
<div class="inputContainer" >
<!--color-->
<div class="input" id="colorInput">
<input type="color" list id="paintColor">
</div>
<!--line thickeness-->
<div class="input" id="thickenessInput">
<div id="circle"></div>
</div>
<!--slider-->
<div class="input">
<div id="slider"></div>
</div>
</div>
<form action="back_index.php" enctype="multipart/form-data" method="post"
id="form">
<h2>Nama Gambar<input class="putt" type="text" name="nama_gambar"></h2>
<!--canvas-->
<div id="canvasContainer">
<canvas id="paint" width="1000px" height="400px"></canvas>
</div>
<!-- buttons-->
<div class="btnContainer">
<!--Erase button -->
<div class="btnInput">
<span id="erase" class="button simp">Hapus</span>
</div>
<!--Save button -->
<div class="btnInput">
<a href="../daftar_gambar_user.php"><input type="submit" value="SIMPAN"
id="save" class="button paddd"></input></a>
</div></form>
<!--Reset button -->
<div class="btnInput">
<span id="reset" class="button simp">Ulangi</span>
</div>
</div>
<!-- jQuery-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery UI-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
<!--javascript-->
<script src="javascript.js">
</script>
</body>
</html>
4.1.7 Daftar Gambar dan Source Code
Pada daftar gambar user dapat melihat nama gambar yang sudah di buat. User juga dapat
menghapus gambar seperti pada gambar dibawah. Setelah itu, user dapat Log Out pada
halam ini untuk ke halaman Landing Page.
<body>
<div class="container-fluid">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#"></a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#"></a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
</div>
</div>
</header>
<div class="p-3 p-md-5">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">DAFTAR GAMBAR USER</h1>
</div>
</div>
<div class="row mb-2">
<div class="col-md-8 p-3">
<div class="card mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<table class="table" style="color: black;">
<tbody>
<?php
$data = mysqli_query($dahkonek,"select * from daftar_gambar");
while($d = mysqli_fetch_array($data)){
?>
<tr>
<th scope="row"><span class="dot"></th>
<td><?php echo $d['nama_gambar']; ?></td>
<td><a href="hapus_gambar_user.php?id_gambar=<?php echo
$d['id_gambar'];?>" class="btn btn-primary btn-lg circle-btn">HAPUS </a></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<h1 class="top-mr">DRAWPEN</H1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="dashboard.html" type="button" class="btn btn-lg circle-btn logout-
btn">LOGOUT</a>
</div>
<div class="col-md-4">
<p>Easy Online to Draw and Painting</p>
</div>
</div>
<div class="row mt-10">
<div class="col-md-4">
<a href="home.html" style="color: white;"><h3>&#8678;Back to Home</h3></a>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
4.2 Pengujian
Pada pengujian pembangunan aplikasi menggambar berbasis web, dapat disimpulkan
sebagai berikut:
4.2.1 Landing Page
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
Admin
Menekan tombol Login
Masuk ke halaman login
Sukses
User
Menekan tombol Login
Masuk ke halaman login
Sukses
4.2.2 Halaman Login
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
Admin
Admin memasukkan email dan
password
Admin masuk ke halaman
utama
Sukses
User
User memasukkan username dan
password
User masuk ke halaman utama
Sukses
4.2.3 Halaman Daftar
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
Admin
Admin memasukkan email,
username dan password user
Admin menambahkan data ke
database
Sukses
4.2.4 Halaman Utama Admin
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
Admin
Menekan tombol Daftar Gambar
User
Admin masuk ke halaman
daftar gambar
Sukses
Menekan tombol Buat Gambar
User masuk ke halaman
menggambar
Sukses
Menekan tombol Daftar User
User masuk ke halaman daftar
gambar
Sukses
4.2.5 Halaman Utama User
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
User
Menekan tombol Buat Gambar
User masuk ke halaman
menggambar
Sukses
Menekan tombol Daftar Gambar
User masuk ke halaman daftar
gambar
Sukses
4.2.6 Halaman Menggambar
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
User & Admin
Menambahkan nama gambar
User dapat menambahkan
nama gambar
Sukses
Mengganti warna pena
User dapat mengubah warna
pena
Sukses
Mengganti size garis pena
User dapat mengubah size
garis pena
Sukses
Menyoret bagian kanvas
User dapat menggambar pada
kanvas
Sukses
Menekan tombol hapus
User dapat menghapus coretan
gambar
Sukses
Menekan tombol simpan
User dapat menyimpan
gambar yang dibuat
Gagal
Masuk ke halaman daftar
gambar
Sukses
Menekan tombol ulangi
Gambar dapat di reset dan
diulangi
Sukses
4.2.7 Halaman daftar gambar
Aktor
Skenario Pengujian
Hasil Pengujian
Validasi
Tampilan Daftar Gambar
Aplikasi menunjukkan nama
gambar yang pernah disimpan
Sukses
User
User menekan tombol hapus
Gambar terhapus
Sukses
User menekan tombol Log out
User kembali ke halaman
utama
Sukses
BAB V
KESIMPULAN
Berdasarkan analisis yang sudah dibuat menggunakan perbandingan literature review
dari beberapa jurnal, didapatkan bahwa metode RAD didalam beberapa kriteria memang lebih
unggul daripada metode pengembangan perangkat lunak lainnya dikarenakan metode RAD
sangat efektif diimplementasi pada pengembangan perangkat lunak pada suatu industri atau
organisasi digital yang relatif cepat, tidak memakan banyak waktu, dan tidak banyak
terintegrasi atau tidak terlalu kompleks.
Metode RAD pada dasarnya mengutamakan kecepatan dan fleksibilitas dalam proyek
pengembangan perangkat lunak, selain itu metode RAD juga mengutamakan fungsionalitas
yang didalamnya sudah terdapat hasil dari pengujian fungsionalitas yang mengakibatkan
kualitas perangkat lunak dari segi fungsionalitas sudah terjamin. Anggota dalam tim pun tidak
terlalu banyak, akan tetapi tetap mengikuti role yang sudah ada pada metode RAD dan client
menjadi lebih bisa aktif memberikan feedback atau umpan balik mengenai fungsionalitas dari
perangkat lunak yang akan dikembangkan. Sebelum menggunakan metode RAD, sebaiknya
disesuaikan terlebih dahulu untuk kebutuhan, ruang lingkup pengerjaan, dan waktu
pengembangan perangkat lunak tersebut.